<template>
	<view class="start-index">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<service ref="service"></service>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<circle-page ref="circleRef"></circle-page>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<activity ref="activity"></activity>
			</scroll-view>
		</view>
		<view v-show="tabberPageLoadFlag[3] && currentIndex === 3">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<preferred ref="preferredRef"></preferred>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<mine ref="mine"></mine>
			</scroll-view>
		</view>

		<tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
			activeIconColor="#fff" :animation="true" :safeAreaInsetBottom="true" @change="switchTabbar"></tn-tabbar>
	</view>
</template>

<script>
	import Service from './service/service.vue'
	import CirclePage from './circle/circle.vue'
	import Activity from './activity/activity.vue'
	import Preferred from './preferred/preferred.vue'
	import Mine from './mine/mine.vue'

	export default {
		components: {
			Service,
			CirclePage,
			Activity,
			Preferred,
			Mine
		},
		data() {
			return {
				tabbarList: [{
						title: '服务',
						activeIcon: '/static/tabbar/服务1.png',
						inactiveIcon: '/static/tabbar/服务.png'
					},
					{
						title: '捐款',
						activeIcon: '/static/tabbar/爱心1.png',
						inactiveIcon: '/static/tabbar/爱心.png'
					},
					{
						title: '吉农校友',
						activeIcon: '/static/tabbar/navlogo.png',
						inactiveIcon: '/static/tabbar/navlogo.png',
						iconSize: 80,
						out: true
					},
					{
						title: '活动',
						activeIcon: '/static/tabbar/活动1.png',
						inactiveIcon: '/static/tabbar/活动.png',
					},
					{
						title: '我的',
						activeIcon: '/static/tabbar/我的1.png',
						inactiveIcon: '/static/tabbar/我的.png'
					}
				],
				currentIndex: 0,
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const index = Number(options.index || 2)
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)
			uni.$on('switchToTab', (targetIndex) => {
				this.switchTabbar(targetIndex);
			});
		},
		onUnload() {
			uni.$off('switchToTab');
		},
		methods: {
			switchTabbar(index) {
				this._switchTabbarPage(index)
				// 切换后手动调用子组件的显示逻辑
				this.$nextTick(() => {
					const refNames = ['service', 'circleRef', 'activity', 'preferredRef', 'mine']
					const currentRef = this.$refs[refNames[index]]
					if (currentRef && currentRef.onTabShow) {
						currentRef.onTabShow() // 调用子组件自定义的显示方法
					}
				})
			},
			tabbarPageScrollLower(e) {
				if (this.currentIndex === 3) {
					this.$refs.preferredRef.getRandomData && this.$refs.preferredRef.getRandomData()
				}
			},
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>